<template>
  <div id="map" class="Map"></div>
</template>

<script>
/* eslint-disable*/
import { loadBaiDuMap, loadBMap } from "./loadBMap"
//  import infoBox from './BMapLib_infoBox'

export default {
  name: "Mapbox",
  data () {
    return {
      ak: "sV4gxjrYXvfdY3ZRrsfr7p6NX2GFpo4o",
      BMap: {},
      map: {},
      currentPosition: null,
    }
  },
  mounted: function () {
    this.$nextTick(() => {
      var _this = this
      loadBaiDuMap(_this.ak).then((BMap) => {
        var map = new BMap.Map("map", { enableMapClick: false })
        var mapStyle = { style: "midnight" } // 地图颜色 黑夜风格(dark) 午夜蓝风格(midnight)
        map.setMapStyle(mapStyle)
        map.enableScrollWheelZoom()// 启用滚轮放大缩小
        let pointsData = [
          { x: 114.01597366, y: 22.56605355, name: "报警A", num: '津VP331', time: '2019.01.01 21:36' },
          { x: 114.02597333, y: 22.52615255, name: "报警B", num: '津VP332', time: '2019.03.22 21:36' },
          { x: 114.03297388, y: 22.54605355, name: "报警C", num: '津VP333', time: '2019.07.30 21:36' },
        ]
        var point = new BMap.Point(pointsData[0].x, pointsData[0].y)
        map.centerAndZoom(point, 14) // 显示位置，缩放级别


        pointsData.forEach((e, i) => {
          let point = new BMap.Point(e.x, e.y)
          let label = new BMap.Label(e.name, {
            offset: new BMap.Size(20, -10)
          })

          // 创建信息窗口对象
          let html = `
            <p style="color:red;">出现车祸</p>
            <div class='infoBoxContent'>
              <div><label style="color: #01CCCC;">车牌号：</label><span>`+ e.num + `</span></div>
              <div><label style="color: #01CCCC;">时间：</label><span>`+ e.time + `</span></div>
              <div><label style="color: #01CCCC;">地点：</label><span>福建省龙岩市新罗区市政府东`+ i + 1 + `00米</span></div>
            </div>
          `

          let opts = {
            width: 230, // 信息窗口宽度
            height: 100, // 信息窗口高度
            backgroundColor: 'rgba(5, 28, 42, .6)',
            title:'出现车祸', // 信息窗口标题
            enableMessage: true, //设置允许信息窗发送短息
            message: "123"
          }

          // 创建信息窗口对象
          let infoWindow = new BMap.InfoWindow("车牌号：" + e.num + "<br>时间:" + e.time + "地点：" + '<span>福建省龙岩市新罗区市政府东`+ i + 1 + `00米</span>', opts)
          addMarker(point, label, infoWindow)
        })


        function addMarker (point, label, infoWindow) {
          var myIcon = new BMap.Icon(require("./img/view_09.png"), new BMap.Size(100, 100))
          var marker = new BMap.Marker(point, { icon: myIcon })
          // 1. 将标注添加到地图中
          map.addOverlay(marker)
          // 2. 设置文字标签
          marker.setLabel(label)
          // 3.点击图片标注显示信息窗体

          marker.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, point) //开启信息窗口
          })
        }
      })
    })
  },
};
</script>

<style  lang="less" scoped>
</style>
